@use '../name.scss' as *;
@use '../src/var.scss' as *;

$component: 'Setting';
@include buildView($component) {
  height: inherit;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: scroll;
  scrollbar-width: none;
  box-sizing: border-box;
  padding: 16px 16px 48px 16px;
  @include build($component, 'title') {
    margin: 2.5vh;
    font-size: 5vh;
    width: 100%;
    font-weight: 700;
    color: $bg-color-light;
    text-shadow: 1px 1px 2px $bg-color-light;
  }
  @include buildWrap($component, 'content') {
    width: 100%;
    height: 90vh;
    padding: 20px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    @include build('content', 'item') {
      width: 100%;
      display: flex;
      align-content: center;
      justify-content: flex-start;
      flex-wrap: nowrap;
      margin: 2vh 0;
      @include build('item', 'title') {
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
        color: $bg-color-light;
        margin-right: 16px;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        height: inherit;
      }
    }
  }
}